<template>
  <view class="home">
    <!--  背景图 -->
    <view class="backgroud">
      <image src="../../static/imgs/Slice92@2x.png" mode=""></image>
    </view>

    <!--  -->
    <view class="container">
      <view class="title">
        <u-icon name="arrow-left" color="black" size="30" @click='Fhuidnlinfg()'></u-icon>
        <text class="title_name">加入团队</text>
      </view>

      <!--  -->
      <view class="content">
        <view class="tag">
          <image src="../../static/imgs/Group929.png" mode=""></image>
          <view>成为代理商</view>
        </view>

        <view class="user">
          <view class="name">
            <text>姓名</text>
            <input type="text" v-model="name">
          </view>
          <view class="phone">
            <text>手机号</text>
            <input type="text" v-model="phone">
          </view>
          <view class="phone">
            <text>身份证号码</text>
            <input type="text" v-model="standing">
          </view>
          <view class="phone">
            <text>性别</text>
            <input type="text" v-model="sex">
          </view>
          <view class="phone">
            <text>所在城市</text>
            <input type="text" v-model="city">
          </view>
          <view class="phone">
            <text>所在学校</text>
            <input type="text" v-model="school">
          </view>
        </view>
      </view>

      <!--  -->
      <view class="join">
        <button @click="goMy()">申请加入</button>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        name: '', // 姓名
        phone: '', // 手机号
        standing: '', // 身份证号
        sex: '', // 性别
        city: '', // 城市
        school: '', //学校
      };
    },
    methods: {
      Fhuidnlinfg() {
        uni.navigateBack({
          delta: 1
        })
      },
      goMy() {
        uni.switchTab({
          url: `/pages/my/my`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {

    // 背景图
    .backgroud {
      >image {
        width: 750rpx;
        // height: 1624rpx;
        height: 100vh;
      }
    }

    // 
    .container {
      position: absolute;
      top: 116rpx;
      left: 32rpx;

      .title {
        font-weight: bold;
        color: #333333;

        .title_name {
          font-size: 32rpx;
          margin-left: 250rpx;
        }
      }

      // 
      .content {
        position: relative;
        margin-top: 570rpx;
        padding: 94rpx 40rpx 48rpx;
        width: 686rpx;
        height: 608rpx;
        background: #FFF8F2;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .tag {
          position: absolute;
          top: -10rpx;
          left: 35%;

          >image {
            width: 230rpx;
            height: 68rpx;
            // background: linear-gradient(180deg, #FFC587 0%, #FE8347 100%);
          }

          >view {
            transform: translate(47rpx, -61rpx);
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
          }
        }

        .user {

          .name,
          .phone {
            margin-bottom: 24rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            >text {
              font-size: 28rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
            }

            >input {
              padding-left: 10rpx;
              font-size: 24rpx;
              width: 434rpx;
              height: 56rpx;
              background: #FFEEDE;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
            }
          }
        }
      }

      // 
      .join {
        margin-top: 68rpx;

        >button {
          width: 606rpx;
          height: 66rpx;
          line-height: 66rpx;
          background: linear-gradient(106deg, #FFEDE4 0%, #FFDCCA 100%);
          border-radius: 70rpx 70rpx 70rpx 70rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }
</style>